<template>
  <div class="search-container">
    <div class="search-view">
      <button type="submit" class="search-menu">
        <i class="icon-ali-search"></i>
      </button>
    </div>
    <div class="search-content">
      <input readonly class="search-input" type="text" placeholder="请输入内容" v-if="isReadOnly" @click="_goTo"/>
      <input v-model="data" @keyup.enter="_submit(data)" class="search-input" type="text" placeholder="请输入内容" v-else/>
    </div>
    <div class="search-other">
      <div v-show="data" class="revoke" @click="_clear">
        <i class="icon-ali-revoke"></i>
      </div>
      <div v-show="showScan" class="search-scan" @click="_scan">
        <i class="icon-ali-scan"></i>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
    name: 'union-search',
    props: {
      showScan: {
        type: Boolean,
        default: false
      },
      isReadOnly: {
        type: Boolean,
        default: false
      }
    },
    components: {
    },
    data () {
      return {
        data: undefined
      }
    },
    mounted () {
    },
    methods: {
      _submit (val) {
        this.$emit('submit', val)
      },
      _goTo () {
        this.$emit('goTo')
      },
      _scan () {
        this.$emit('scan')
      },
      _clear () {
        this.data = undefined
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "union-search.styl"
</style>
